import React from 'react';
import { Provider } from 'react-redux';
import { TabBar } from 'antd-mobile';
import { AppOutline, HistogramOutline } from 'antd-mobile-icons';
import { store } from './store/store';
import Detection from './components/Detection';
import History from './components/History';
import './App.css';

const App: React.FC = () => {
  const [activeKey, setActiveKey] = React.useState('detection');

  const tabs = [
    {
      key: 'detection',
      title: '检测',
      icon: <AppOutline />
    },
    {
      key: 'history',
      title: '历史记录',
      icon: <HistogramOutline />
    }
  ];

  return (
    <Provider store={store}>
      <div className="app-container">
        <div className="content">
          {activeKey === 'detection' ? <Detection /> : <History />}
        </div>
        <TabBar activeKey={activeKey} onChange={setActiveKey}>
          {tabs.map(item => (
            <TabBar.Item
              key={item.key}
              icon={item.icon}
              title={item.title}
            />
          ))}
        </TabBar>
      </div>
    </Provider>
  );
};

export default App;
